@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        .el-form-item {
            margin-bottom: 0px;
        }
        body {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
        }

        html {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
        }
    </style>
}
<el-card class="rounded-0">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2 class="h1 fw-bold">我的证书</h2>
            <small>共获得 {{ list?list.length:0 }}</small>
        </div>
        <div>
            <el-form v-on:submit.native.prevent :inline="true" :model="form">
                <el-form-item label="获证日期">
                    <el-date-picker v-model="form.dateFrom"
                                    type="date"
                                    value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                                    placeholder="选择开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="到">
                    <el-date-picker v-model="form.dateTo"
                                    type="date"
                                    value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                                    placeholder="选择结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="证书">
                    <el-input prefix-icon="el-icon-search" v-model="form.keyWords" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain icon="el-icon-search" v-on:click="btnSearchClick">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</el-card>
<div class="p-3" v-if="list && list.length>0">
    <div class="row g-5">
        <div class="col-4" v-for="(cer,index) in list">
            <a href="javascript:;" class="card card-lift" v-on:click="btnViewCer(cer)">
                <div class="card-body">
                    <h5 class="card-title">{{ cer.cerName }}【{{ cer.cerNumber }}】</h5>
                    <ul class="fw-light mb-0">
                        <li class="list-inline-item mb-0">
                            获证日期：{{ cer.awartDate }}
                        </li>
                        <li class="list-inline-item mb-0">
                            试卷：{{ cer.paperName }}
                        </li>
                        <li class="list-inline-item mb-0">
                            成绩：{{ cer.paperScore }}
                        </li>
                    </ul>
                </div>
                <div class="py-8 bg-cover" :style="{'background-image':'url('+(cer.cerImg)+')'}">
                    <div class="py-5"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="my-5 text-center">
        <small>没有更多了</small>
    </div>
</div>
<div class="pt-10" v-else>
    <el-empty image="/sitefiles/assets/images/nodata.svg"></el-empty>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/home/exam/examPaperCer.js" type="text/javascript"></script>
}